<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>铺货管理</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<style>
			.table table>tbody>tr>td img {
				width: 101px;
				height: 101px;
			}
			
			.aa {
				width: 108px;
				margin-left: 39px;
				color: #999;
			}
			
			.hoverUnderline:hover {
				text-decoration: underline;
			}
			
			.notitleClass .layui-layer-setwin .layui-layer-close2 {
				display: none !important;
			}
			
			#proarea-error {
				display: block;
				margin-top: 20px;
			}
		</style>
	</head>

	<body>
		<script src="js/tpl/header.js" type="text/javascript" charset="utf-8"></script>
		<div class="page-wrapper productlist minwidth border" id="page-wrapper">
			<div class="line"></div>
			<script src="js/tpl/menu.js" type="text/javascript" charset="utf-8"></script>
			<div class="vertival-line"></div>
			<div class="page-content">
				<div class="tablist">
					<ul>
						<li class="tabItem active">
							<a href="productManage.html#productManage">生产计划单</a>
						</li>
					</ul>
				</div>

				<div class="page-container">
					<div class="page-form">
						<div>
							<span class="btn disabled fl group">批量指定销售区域</span>
							<span class="btn disabled fl group" style="margin-left:20px;">批量启用</span>
							<span class="btn disabled fl group" style="margin-left:20px;">批量停用</span>
							<span class="btn disabled fl group" id="groupmerge" style="margin-left:20px;">批量合并</span>

							<span class="btn blue addPro  fr"><i class="icon icon_add blue"></i> 新建铺货单</span>
						</div>
						<div class="clearfix"></div>
						<div class="form">
							<form class="multiinline-form">
								<section>
									<div>
										<label>产品名称：</label>
										<input type="text" placeholder="请输入产品名称" style="width:150px;" />
									</div>

									<div>
										<label>铺货单编号：</label>
										<input type="text" placeholder="请输入铺货单编号" style="width: 135px;" />
									</div>

									<div style="margin-right: 0px;">
										<label>创建时间：</label>
										<input type="text" class="Wdate" onclick="WdatePicker()" />--<input type="text" class="Wdate" onclick="WdatePicker()" />
									</div>
								</section>
								<br />
								<div class="clearfix"></div>
								<section style="margin-top:14px;">
									<div>
										<label>计划单编号：</label>
										<input type="text" placeholder="请输入计划单编号" style="width:135px;" />
									</div>
									<div>
										<label>PDA编号：</label>
										<input type="text" placeholder="请输入PDA编号" style="width:125px;" />
									</div>

									<div>
										<label style="line-height: 26px;">状态：</label>
										<div class="overlay">
											<!--这个是用来存放选中的select的值的-->
											<input type="hidden" value="" class="form-select-value" />
											<div class="dropdown">
												<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value" data-default="全部" >全部</span>
				                                <span class="caret"></span>
				                            </button>
												<ul class="none">
													<li data-value='001'>1</li>
													<li data-value='002'>2</li>
													<li data-value='003'>3</li>
													<li data-value='004'>4</li>
												</ul>
											</div>
										</div>
									</div>

									<input type="button" value="搜索" class="search-input-button" />
									<input type="button" value="重置" onclick="resetForm()" class="search-input-button bgblue" />
								</section>
							</form>
						</div>
					</div>
					<div class="table">
						<div class="tablelist">
							<table>
								<thead>
									<tr>
										<th class="colspan" style="width:150px;">
											<div class="checkbox inline-block">
												<input type="checkbox" value="" class="label-input" id="checkAll" />
												<label for="checkAll" class="input-label"></label>
											</div>
											全选
										</th>
										<th>铺货单信息</th>
										<th>地区/主题/活动</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="itemContainer">
									<tr>
										<td class="colspan" style="width:150px;">
											<div class="checkbox inline-block" data-id="1" style="position:relative;z-index:10;">
												<input type="checkbox" value="" class="label-input" id="checkbox_1" />
												<label for="checkbox_1" class="input-label"></label>
											</div>
											<img src="images/product/product.png" class="product" />
											<p class="aa">劲酒1993 尊享版</p>
										</td>
										<td>
											<div class="inline-block vertical-middle text-left">
												<p class="">铺货单号：<span class="text-ellipsis colorblue" style="width:150px;">S20160729102138869</span></p>
												<p class="tabletop planname" data-id="1">铺货来源：<span class="text-ellipsis" style="width:150px;">计划单-2015656646465</span></p>
												<p class="tabletop">铺货总码数：11804</p>
												<p class="tabletop">铺货时间：2016.01.12 11:08:37</p>
											</div>
										</td>
										<td>
											<div class="inline-block vertical-middle text-left">
												<p class="hoverUnderline" onclick="showarea(this)" data-id='1'>地区：黑龙江省哈尔滨市南岗区</p>
												<p class="tabletop hoverUnderline" onclick="showTheme(this)" data-id='1'>主题：小刀超级主题</p>
												<p class="tabletop hoverUnderline" onclick="showActivity(this)" data-id='1'>活动：超级大转盘</p>
											</div>
										</td>
										<td>
											<p class="red">启用</p>
										</td>
										<td>
											<div class="text-left  inline-block" style="width:90px;margin-left: 16px;">
												<div class="stopuse hover" data-id='1'><i class="icon icon_stopuse blue"></i> <span>停用</span></div>
												<div class="tabletop hover theme" data-id='1'><i class="icon icon_theme blue"></i> <span>主题</span></div>
												<div class="tabletop hover activity" data-id='1'><i class="icon icon_activity blue"></i> <span>活动</span></div>
												<div class="tabletop hover check" data-id='1'><i class="icon icon_check blue"></i> <span>检查</span></div>
											</div>
										</td>
									</tr>

									<tr>
										<td class="colspan" style="width:150px;">
											<div class="checkbox inline-block" data-id="2" style="position:relative;z-index:10;">
												<input type="checkbox" value="" class="label-input" id="checkbox_2" />
												<label for="checkbox_2" class="input-label"></label>
											</div>
											<img src="images/product/product.png" class="product" />
											<p class="aa">劲酒1993 尊享版</p>
										</td>
										<td>
											<div class="inline-block vertical-middle text-left">
												<p class="">铺货单号：<span class="text-ellipsis colorblue" style="width:150px;">S20160729102138869</span></p>
												<p class="tabletop planname" data-id="1">铺货来源：<span class="text-ellipsis" style="width:150px;">计划单-2015656646465</span></p>
												<p class="tabletop">铺货总码数：11804</p>
												<p class="tabletop">铺货时间：2016.01.12 11:08:37</p>
											</div>
										</td>
										<td>
											<div class="inline-block vertical-middle text-left">
												<p class="hoverUnderline" onclick="showarea(this)" data-id='2'>地区：黑龙江省哈尔滨市南岗区</p>
												<p class="tabletop hoverUnderline" onclick="showTheme(this)" data-id='2'>主题：小刀超级主题</p>
												<p class="tabletop hoverUnderline" onclick="showActivity(this)" data-id='2'>活动：超级大转盘</p>
											</div>
										</td>
										<td>
											<p class="red">启用</p>
										</td>
										<td>
											<div class="text-left  inline-block" style="width:90px;margin-left: 16px;">
												<div class="stopuse hover" data-id='1'><i class="icon icon_stopuse blue"></i> <span class="colorblue">停用</span></div>
												<div class="tabletop hover theme" data-id='1'><i class="icon icon_theme blue"></i> <span class="colorblue">主题</span></div>
												<div class="tabletop hover activity" data-id='1'><i class="icon icon_activity blue"></i> <span class="colorblue">活动</span></div>
												<div class="tabletop hover check" data-id='1'><i class="icon icon_check blue"></i> <span class="colorblue">检查</span></div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="colspan" style="width:150px;">
											<div class="checkbox inline-block" data-id="3" style="position:relative;z-index:10;">
												<input type="checkbox" value="" class="label-input" id="checkbox_3" />
												<label for="checkbox_3" class="input-label"></label>
											</div>
											<img src="images/product/product.png" class="product" />
											<p class="aa">劲酒1993 尊享版</p>
										</td>
										<td>
											<div class="inline-block vertical-middle text-left">
												<p class="">铺货单号：<span class="text-ellipsis colorblue" style="width:150px;">S20160729102138869</span></p>
												<p class="tabletop planname" data-id="1">铺货来源：<span class="text-ellipsis" style="width:150px;">计划单-2015656646465</span></p>
												<p class="tabletop">铺货总码数：11804</p>
												<p class="tabletop">铺货时间：2016.01.12 11:08:37</p>
											</div>
										</td>
										<td>
											<div class="inline-block vertical-middle text-left">
												<p class=" hoverUnderline" onclick="showarea(this)" data-id='3'>地区：黑龙江省哈尔滨市南岗区</p>
												<p class="tabletop hoverUnderline" onclick="showTheme(this)" data-id='3'>主题：小刀超级主题</p>
												<p class="tabletop hoverUnderline" onclick="showActivity(this)" data-id='3'>活动：超级大转盘</p>
											</div>
										</td>
										<td>
											<p class="red">启用</p>
										</td>
										<td>
											<div class="text-left  inline-block" style="width:90px;margin-left: 16px;">
												<div class="stopuse hover" data-id='1'><i class="icon icon_stopuse blue"></i> <span class="colorblue">停用</span></div>
												<div class="tabletop hover theme" data-id='1'><i class="icon icon_theme blue"></i> <span class="colorblue">主题</span></div>
												<div class="tabletop hover activity" data-id='1'><i class="icon icon_activity blue"></i> <span class="colorblue">活动</span></div>
												<div class="tabletop hover check" data-id='1'><i class="icon icon_check blue"></i> <span class="colorblue">检查</span></div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="colspan" style="width:150px;">
											<div class="checkbox inline-block" data-id="4" style="position:relative;z-index:10;">
												<input type="checkbox" value="" class="label-input" id="checkbox_4" />
												<label for="checkbox_4" class="input-label"></label>
											</div>
											<img src="images/product/product.png" class="product" />
											<p class="aa">劲酒1993 尊享版</p>
										</td>
										<td>
											<div class="inline-block vertical-middle text-left">
												<p class="">铺货单号：<span class="text-ellipsis colorblue" style="width:150px;">S20160729102138869</span></p>
												<p class="tabletop planname" data-id="1">铺货来源：<span class="text-ellipsis" style="width:150px;">计划单-2015656646465</span></p>
												<p class="tabletop">铺货总码数：11804</p>
												<p class="tabletop">铺货时间：2016.01.12 11:08:37</p>
											</div>
										</td>
										<td>
											<div class="inline-block vertical-middle text-left">
												<p class=" hoverUnderline" onclick="showarea(this)" data-id='4'>地区：黑龙江省哈尔滨市南岗区</p>
												<p class="tabletop hoverUnderline" onclick="showTheme(this)" data-id='4'>主题：小刀超级主题</p>
												<p class="tabletop hoverUnderline" onclick="showActivity(this)" data-id='4'>活动：超级大转盘</p>
											</div>
										</td>
										<td>
											<p class="red">启用</p>
										</td>
										<td>
											<div class="text-left  inline-block" style="width:90px;margin-left: 16px;">
												<div class="stopuse hover" data-id='1'><i class="icon icon_stopuse blue"></i> <span class="colorblue">停用</span></div>
												<div class="tabletop hover theme" data-id='1'><i class="icon icon_theme blue"></i> <span class="colorblue">主题</span></div>
												<div class="tabletop hover activity" data-id='1'><i class="icon icon_activity blue"></i> <span class="colorblue">活动</span></div>
												<div class="tabletop hover check" data-id='1'><i class="icon icon_check blue"></i> <span class="colorblue">检查</span></div>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>

						<div class="pagelist fr">
							<div class=" pagedesc fl">当前<span class="currentPage"></span>/<span class="totalpage"></span>，每页<span class="perpage"></span>条，共<span class="totalnumber"></span>条</div>
							<div class="pagination inline-block fl"></div>
							<div class="inline-block fl">
								到第<input type="text" value="" class="gotopage" />页 <input type="button" value="跳转" class="search-input-button border-radius bgblue gotopage_button"></span>
							</div>

						</div>

					</div>

				</div>

			</div>
		</div>

		<div class="footer">
			<div class="footercontainer">
				<ul>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">服务与支持</a>
					</li>
					<li>
						<a href="#">常见问题</a>
					</li>
					<li>
						<a href="#">人才招聘</a>
					</li>
					<li>
						<a href="#">加盟合作</a>
					</li>
				</ul>

				<div style="margin-top:13px;">版权所有@ 2015 - 2016 深圳在乎传媒科技有限公司 粤ICP备15107022-1号</div>
			</div>

		</div>

		<!--这里是删除产品的弹框（无法删除）-->

	</body>

	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/jPages.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/pageFun.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/wdatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layFun.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/jquery.cxselect.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>

	<script>
		var checkedLen, id;
		$(function() {
			commonObj.checkinit();
			var pageObj = new pageFun();
			var currentpage = 1,
				perPage = 10,
				totalNumber = 50;
			pageObj.pageNoObj = $('#pageNo');
			pageObj.submitFun = function() {
					var currentPage = pageObj.pageNoObj.val(); //这个是当前页的页码
				}
				/*参数每页多少个,当前页,总个数,容器的ID*/
			pageObj.init(perPage, currentpage, totalNumber, 'itemContainer');

			//点击checkbox之后显示批量按钮
			$('.tablelist input:checkbox').click(function() {
				checkedLen = $('.checkbox.checked_checkbox').length;
				if(checkedLen > 0) {
					$('.group').removeClass('disabled');
				} else {
					$('.group').addClass('disabled');
				}
			})

			//批量合并
			$('#groupmerge').click(function() {
				if(checkedLen > 0) {
					layObj.open('confirmDelete.html', 400, 200, '批量合并铺货单', assignInfo);
				}
			})

			$('.addPro').click(function() {
				layObj.open('addPuhuo.html', 440, 459, '批量合并铺货单', assignInfo);
			})

		})

		//点击确定合并之后执行的方法
		function Merge() {
			var ids = new Array();
			$('#itemContainer .checkbox.checked_checkbox').each(function() {
				var id = $(this).attr('data-id');
				ids.push(id);
			})
			ids = ids.join(',');
			console.log(ids);
		}
		//这里是批量合并弹框
		function assignInfo(layero, index) {
			var body = layer.getChildFrame('body', index);
			var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
			body.find('.title').html('合并后将清空销售地区和活动内容，且一经合并无法撤销，是否确认合并？');
			//给父页面传值
			body.find('#subButton').on('click', function() {
				Merge();
				layer.close(index);
			});
			body.find("#cancelButton").on('click', function() {
				layer.close(index);
			});
		}

		//省市区弹框
		function showarea(obj) {
            var pvalue="120000",cvalue="",dvalue="";
			var html = '<div class="form" style="padding:20px 40px;"> <form class="block-form" style="margin-top:-28px;" id="commentForm"> <input type="hidden" value="' + id + '" name="id"  id="aid"/>'
			+'<div class="select-city">  <div class="hidden"> <label><span class="red">*</span>国家：</label> <div class="overlay"> <input type="hidden" value="0" class="form-select-value" id="country" /> <div class="dropdown"> <button class="dropdown-toggle form-dropdown" type="button"> <span class="value text-ellipsis pro_countryvalue">中国</span> <span class="caret"></span> </button> <ul class="select select_country none"></ul> <select class="country hidden none " data-value="0" style="margin-top:20px;"></select> </div> </div> </div> <div> <label><span class="red hidden">*</span>省份：</label> <div class="overlay"> <!--这个是用来存放选中的select的值的--> <input type="hidden" value="'+pvalue+'" class="form-select-value" id="provname" /> <div class="dropdown"> <button class="dropdown-toggle form-dropdown" type="button"> <span class="value text-ellipsis pro_provincevalue">选择省份</span> <span class="caret"></span> </button> <ul class="select select_prov none"></ul> <select class="prov hidden none " data-value="'+pvalue+'"  style="margin-top:20px;"></select> </div> </div> </div>  <div style="margin-top:13px;"> <label><span class="red hidden">*</span>城市：</label> <div class="overlay"> <!--这个是用来存放选中的select的值的--> <input type="hidden" value="'+cvalue+'" class="form-select-value" id="cityname" /> <div class="dropdown"> <button class="dropdown-toggle form-dropdown" type="button"> <span class="value text-ellipsis pro_cityvalue">选择城市</span> <span class="caret"></span> </button>  <ul class="select  select_city none"></ul> <select class="city hidden none " data-jsonValue="name" data-value="'+cvalue+'" style="margin-top:20px;"></select> </div> </div> </div>  <div style="margin-top:13px;"> <label><span class="red hidden">*</span>地区：</label> <div class="overlay"> <!--这个是用来存放选中的select的值的--> <input type="hidden" value="'+dvalue+'" class="form-select-value" id="districtname" /> <div class="dropdown"> <button class="dropdown-toggle form-dropdown" type="button"> <span class="value text-ellipsis pro_cityvalue">选择地区</span> <span class="caret"></span> </button>  <ul class="select  select_district none"></ul> <select class="district hidden none " data-jsonValue="name" data-value="'+dvalue+'" style="margin-top:20px;"></select> </div> </div> <input type="text" class="proarea" name="proarea" id="proarea" style="visibility: hidden; width:0px;" /> </div> </div>    <div class="text-center" style="margin-top:20px;"> <input type="button" value="保存" class="search-input-button" id="subButton" /> <input type="button" value="返回" class="search-input-button bgblue" id="backButton" style="margin-right:0px;" /> </div> </form> </div>';
			layObj.content(300, 300, '文件下载', html, '', chooseArea);
		}




		function chooseArea(layero, index) {
			roleobj.init();
			roleobj.submitFun(layero, index);
			roleobj.backFun(layero, index);
		}
		
		var roleobj = {
			'init': function() {
				var staticPath = 'js/cityData2.min.json';
				selectObj.showChangeValue();
				/*调用省市区*/
				$.cxSelect.defaults.url = productObj.staticPath;
				$.cxSelect.defaults.emptyStyle = 'none';
				var data = $('.select-city').cxSelect({
					'jsonName':'name',
					'jsonValue':'value',
					'jsonSub':'sub',
					url: staticPath,
					/* 如果服务器不支持 .json 类型文件，请将文件改为 .js 文件*/
					selects: ['country','prov', 'city', 'district'],
					/*数组，请注意顺序*/
					emptyStyle: '',
					'htmlTagName': 'li',
					"required": false,
				});
			},
			"submitFun": function(layero, index) {
				//给父页面传值
				$('body').find('#subButton').on('click', function() {
					layer.close(index);
				});
			},
			"backFun": function(layero, index) {
				$('body').find("#backButton").on('click', function() {
					layer.close(index);
				});
			}
		}
		
		

		function assignId(layero, index) {
			var body = layer.getChildFrame('body', index);
			var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
			body.find('#aid').val(id);
		}

		//主题弹框
		function showTheme(obj) {
			id = $(obj).attr('data-id');
			layObj.open('setTheme.html', 843, 600, '选择主题', assignId);
			//			layObj.layerPost('setTheme.html',843,600,'选择主题',{'id':1,'name':'fdsafd'},'setTheme.html',assignId);
		}

		//活动弹框
		function showActivity(obj) {
			id = $(obj).attr('data-id');
			layObj.open('setActivity.html', 875, 582, '选择活动', assignId);
		}

		
	</script>

</html>